<template>
    <div class="an-user-page">
      <x-header class="head-gree">定位</x-header>
      <div id="container" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script>
  import { Box,XButton,XHeader  } from 'vux'
    export default {
        name: "web-map",
      components: {
        Box,
        XButton,
        XHeader,
      },
      mounted(){
          this.anloud();
      },
      methods:{
          anloud(){
            var map = new AMap.Map('container', {
              resizeEnable: true, //是否监控地图容器尺寸变化
            });

            map.plugin('AMap.Geolocation', function() {
              let geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
              });

              map.addControl(geolocation);
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', onComplete);
              AMap.event.addListener(geolocation, 'error', onError);

              function onComplete (data) {
                console.log(1,data);
                // data是具体的定位信息
              }

              function onError (data) {
                console.log(2,data);
                // 定位出错
              }
            })


          }
      }
    }
</script>

<style scoped>

</style>
